import * as YvanUI from 'yvan-ui-wotu'
import CustomData from "../widget/custom.data";

const _ = YvanUI.lodash
const React = YvanUI.React

interface Ref {

}

export default class Layout2 extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        form: {
            f1: '',
            f2: '',
            f3: '',
        }
    })

    vjson = {
        title: '布局3',
        bodyStyle: {
            height: '100%',
            display: 'flex',
            flexDirection: 'column'
        },
        items: [
            {
                view: 'card',
                style: {
                    marginBottom: '12px'
                },
                bodyStyle: {
                    padding: '20px 20px 0 20px'
                },
                items: [
                    {
                        view: 'form-plus',
                        defaultExpand: true,
                        hideReset: false,
                        hideQuery: false,
                        items: [
                            {view: 'text', label: 'text1', bind: 'main.form.f1'},
                            {view: 'text', label: 'text2', bind: 'main.form.f2'},
                            {view: 'text', label: 'text3', bind: 'main.form.f3', isExtend: true},
                            {view: 'text', label: 'text4', bind: 'main.form.f4', isExtend: true},
                            {view: 'text', label: 'text5', bind: 'main.form.f5', isExtend: true},
                            {view: 'text', label: 'text6', bind: 'main.form.f6', isExtend: true},
                            {view: 'text', label: 'text6', bind: 'main.form.f7', isExtend: true},
                        ],
                        onResetClick: (sender: YvanUI.FormPlus, theform: YvanUI.Form) => {
                            theform.resetFields()
                        },
                        onSubmitClick: (sender: YvanUI.FormPlus, theform: YvanUI.Form) => new Promise((resolve, reject) => {
                            theform.validateFields().then(() => {
                                setTimeout(() => {
                                    resolve('ok')
                                }, 3000)

                            }).catch(e => {
                                YvanUI.showValidateErrorDialog(this, e)
                                reject(e)
                            })
                        })
                    }
                ]
            },
            {
                view: 'card',
                style: {
                    flexGrow: 1,
                    display: 'flex',
                    flexDirection: 'column'
                },
                bodyStyle: {
                    // padding: 0,
                    flexGrow: 1,
                    display: 'flex',
                    flexDirection: 'column'
                },
                items: [
                    {
                        view: 'tabs',
                        className: 'flex-tabs',
                        renderTabBar: () => null,
                        // style:{
                        //     flexGrow: 1
                        // },
                        items: [
                            {
                                title: 'tab1',
                                content: {
                                    view: 'card',
                                    style: {
                                        flexGrow: 1,
                                        display: 'flex',
                                        flexDirection: 'column'
                                    },
                                    bodyStyle: {
                                        padding: 0,
                                        flexGrow: 1,
                                        display: 'flex',
                                        flexDirection: 'column'
                                    },
                                    items: [
                                        {
                                            view: 'grid',
                                            height: 'flex',
                                            style: {
                                                flexGrow: 1
                                            },
                                            title: '表格示例',
                                            toolbar: [
                                                {
                                                    view: 'button',
                                                    text: '新建',
                                                    icon: 'fa fa-plus',
                                                    type: 'primary',
                                                    onClick: () => {
                                                        YvanUI.showInfoDialog('新建')
                                                    }
                                                }
                                            ],
                                            idField: "customerid",
                                            columns: [
                                                {field: "customerid", hidden: true},
                                                {field: "customercode", title: "客户编号", width: 80},
                                                {field: "customername", title: "客户名称", width: 120},
                                                {field: "logogram", title: "助记码", width: 80},
                                                {field: "industryclass", title: "客户类型", width: 100},
                                                {field: "customertype", title: "客户类别", width: 100},
                                                {field: "zip", title: "邮编", width: 80},
                                                {field: "contact", title: "联系人", width: 80},
                                                {field: "telephone", title: "电话", width: 80},
                                                {field: "province", title: "省", width: 80},
                                                {field: "city", title: "市", width: 80},
                                                {field: "address", title: "地址", width: 100},
                                                {field: "ownername", title: "所属货主", width: 100},
                                                {field: "isdefaultowner", title: "是否默认货主", width: 120},
                                                {field: "routeid", hidden: true},
                                                {field: "routename", title: "线路名称", width: 120},
                                                {field: "isenable", title: "是否启用", width: 100},
                                                {field: "remark", title: "备注", width: 100},
                                            ],
                                            dataSource: {
                                                func: () => {
                                                    return new Promise(resolve => {
                                                        return resolve(CustomData)
                                                    })
                                                }
                                            },
                                            onDataSourceAfter: (sender: YvanUI.Grid, dataOrgin: any[], raw: any, api: any) => {
                                                const offset = (sender.currentPage - 1) * sender.pageSize
                                                const endOffset = (offset + sender.pageSize > dataOrgin.length) ? dataOrgin.length : offset + sender.pageSize
                                                return {
                                                    pagination: {
                                                        current: sender.currentPage,
                                                        total: dataOrgin.length,
                                                        size: sender.pageSize
                                                    },
                                                    data: dataOrgin.slice(offset, endOffset)
                                                }
                                            }
                                        }
                                    ]
                                },
                            },
                            {
                                title: 'tab2',
                                content: {
                                    view: 'card',
                                    style: {
                                        flexGrow: 1,
                                        display: 'flex',
                                        flexDirection: 'column'
                                    },
                                    bodyStyle: {
                                        padding: 0,
                                        flexGrow: 1,
                                        display: 'flex',
                                        flexDirection: 'column'
                                    },
                                    items: []
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }

}